<!doctype html>
<head>
    <title>Raycaster</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
        if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
        
        mapboxgl.accessToken = config.accessToken;
        var origin = [-122.4340, 37.7353, 1000];

        var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/dark-v9',
          center: origin,
          zoom: 15.95,
          pitch: 60,
          heading: 41,
          hash: true
        });

        var active = false
        map.on('style.load', function() {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function(map, mbxContext){

                    window.tb = new Threebox(
                        map, 
                        mbxContext,
                        {defaultLights: true}
                    );

                    // initialize geometry and material of our cube object
                    var geometry = new THREE.BoxGeometry(2000, 2000, 2000);

                    var redMaterial = new THREE.MeshPhongMaterial( {
                        color: 0x660000, 
                        side: THREE.DoubleSide
                    });
                    var greenMaterial = new THREE.MeshPhongMaterial( {
                        color: 0xaaffaa, 
                        side: THREE.DoubleSide
                    });


                    cube = new THREE.Mesh(geometry, redMaterial);
                    cube = tb.Object3D({obj:cube, units:'meters'})
                        .setCoords(origin);
                    
                    tb.add(cube)
                    var highlighted = [];

                    //add mousing interactions
                    map.on('mousemove', function(e){

                        // Clear old objects
                        highlighted.forEach(function(h) {
                            h.material = redMaterial;
                        });
                        highlighted.length = 0;


                        // calculate objects intersecting the picking ray
                        var intersect = tb.queryRenderedFeatures(e.point)[0]
                        var intersectionExists = typeof intersect == "object"

                        // if intersect exists, highlight it
                        if (intersect) {

                            var nearestObject = intersect.object;
                            nearestObject.material = greenMaterial;
                            highlighted.push(nearestObject)

                        }

                        // on state change, fire a repaint
                        if (active !== intersectionExists) {
                            active = intersectionExists;
                            tb.repaint();
                        }
                    });
                },

                render: function(gl, matrix){
                    tb.update();
                }
            });
        });

    </script>
</body>